<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>编辑商品</title>
    <%@ include file="../../pages/common/head.jsp" %>
    <style type="text/css">
        h1 {
            text-align: center;
            margin-top: 200px;
        }

        h1 a {
            color: red;
        }

        input {
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        function setImg(obj) {
            var URL = null;
            var f = $(obj).val();
            if (f == null || f == undefined || f == '') {
                return false;
            }
            if (!/\.(?:png|jpg|bmp|gif|PNG|JPG|BMP|GIF)$/.test(f)) {
                alert("类型必须是图片(.png|jpg|bmp|gif|PNG|JPG|BMP|GIF)");
                $("#photoUrl").val("");
                $("#photourlShow").attr("src", "");
                $(obj).val('');
                return false;
            }
            var data = new FormData();
            $.each($(obj)[0].files, function (i, file) {
                data.append('file', file);
            });
            $.ajax({
                type: "POST",
                url: "http://localhost:8083/shop/upload.do",
                data: data,
                cache: false,
                contentType: false,    //不可缺
                processData: false,    //不可缺
                dataType: "text",//返回的数据类型
                success: function (url) {
                    //异步回调函数
                    URL = url;
                    console.log(url);
                    if (!url || url != '') {
                        $("#photoUrl").val(url);//将地址存储好
                        $("#photourlShow").attr("src", url);//显示图片
                    } else {
                        $("#photoUrl").val("");
                        $("#photourlShow").attr("src", "");
                        $(obj).val('');
                    }
                }
            });
            //打印结果：null 代表success函数是异步函数：并不是按顺序执行，而是后面的代码会先执行
            console.log(URL);
        }
    </script>
</head>
<body>
<div id="header">
    <img class="logo_img" alt="" src="static/img/logo.gif">
    <span class="wel_word">编辑商品</span>
    <div>
        <a href="manager/manager/goods.do?action=list">商品管理</a>
        <a href="pages/manager/order_manager.jsp">订单管理</a>
        <a href="index.jsp">返回商城</a>
    </div>
</div>

<div id="main">
    <form action="manager/goods.do" method="get">
        <input name="id" type="hidden" value="${requestScope.goods.id}"/>
        <input name="pageNo" type="hidden" value="${param.pageNo}"/>
        <input type="hidden" name="action" value="${empty requestScope.goods? "add":"update"}"/>
        <table>
            <tr>
                <td>名称</td>
                <td>价格</td>
                <td>品牌</td>
                <td>销量</td>
                <td>库存</td>
                <td colspan="2">操作</td>
            </tr>
            <tr>
                <td><input name="name" type="text" value="${requestScope.goods.name}"/></td>
                <td><input name="price" type="text" value="${requestScope.goods.price}"/></td>
                <td><input name="producer" type="text" value="${requestScope.goods.producer}"/></td>
                <td><input name="sales" type="text" value="${requestScope.goods.sales}"/></td>
                <td><input name="stock" type="text" value="${requestScope.goods.stock}"/></td>
                <input name="img_path" type="hidden" id="photoUrl"/>
                <td><input type="submit" value="提交"/></td>
            </tr>
        </table>
    </form>
    <div>
        <label>商品图片上传</label><input type="file" name="photos" id="photos" onchange="setImg(this)"/><br/>
        <img id="photourlShow"/>
    </div>


</div>

<%@include file="../../pages/common/foot.jsp" %>
</body>
</html>
